<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />帮帮同城
    </view>
    <view class="sousuo">
      <image src="https://pic.bangbangtongcheng.com/static/sousuo2.png" />
      <input type="text" v-model="search" placeholder="搜索" />
      <!-- <view class="quxiao" v-if="!search" @click="back">取消</view>
      <view class="quxiao" v-if="search" @click="searchList">搜索</view>-->
      <view class="quxiao" @click="searchList">搜索</view>
    </view>
    <view class="lishi" v-if="!ss && recordList.length > 0">
      <span style="font-size: 30rpx; color: #333333">历史记录</span>
      <image @click="delrecord" src="https://pic.bangbangtongcheng.com/static/shan.png" />
    </view>
    <view class="list1" v-if="!ss && recordList.length > 0">
      <view
        class="li"
        v-for="item in recordList"
        @click="recordC(item.keyword)"
        :key="item"
        >{{ item.keyword }}
      </view>
    </view>
    <scroll-view
      class="list"
      :style="'height:calc( 100vh - ' + statusBarHeight + 'px - 60px )'"
      scroll-y
      @scrolltolower="down"
      refresher-background="#f5f5f5"
      v-if="ss && searchlogType == 1"
    >
      <view class="li" v-for="(item, index) in Recommend" :key="index">
        <image
          mode="aspectFit"
          :src="item.display_diagram ? item.display_diagram : imgUrl + item.house_image"
          @click="details(item)"
        />
        <view class="li_1" @click="details(item)">
          <view class="tit">{{ item.title }}</view>
          <view class="jiedao">{{ item.region }}</view>
          <span style="margin-right: 14rpx" class="ycyc">{{ item.house_type }}</span>
          <view class="shijian">
            <span
              style="margin-right: 24rpx; color: red; font-size: 36rpx; font-weight: 600"
              v-if="item.transaction_type == 2"
              >{{ item.price }}万</span
            >

            <span
              style="margin-right: 24rpx; color: red; font-size: 36rpx; font-weight: 600"
              v-else
              >{{ item.price }}元</span
            >

            <span style>{{ item.AREA }}㎡</span>
          </view>
        </view>
        <view class="HousCondition" v-if="userQuery && item.examine_status == 2">
          <view class=""></view>
          <view class="status">
            <view class="item" v-if="item.up_status == 1">已上架</view>
            <view class="item" v-if="item.up_status == 0">已下架</view>
            <view class="item" v-if="item.STATUS == 1">已租售</view>
            <!-- <view class="item">已共享</view>
				<view class="item">已置顶</view> -->
          </view>
        </view>
        <view class="sharer-say flex">
          <text style="color: #999"
            >共享者说:
            <text style="color: #333">
              佣金
              <text v-if="item.is_face != 1"> {{ item.commission }}元</text>
              <text v-if="item.is_face == 1"> 面议</text>
            </text>
          </text>
          <view class="flex" @click="openShareTips(item)">
            展开<u-icon name="arrow-down" color="#64b6a8" size="14"></u-icon>
          </view>
        </view>
      </view>
      <view v-if="Recommend.length == 0" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
    </scroll-view>
    <!-- 楼盘 -->
    <scroll-view
      class="list"
      :style="'height:calc( 100vh - ' + statusBarHeight + 'px - 60px )'"
      scroll-y
      @scrolltolower="down"
      refresher-background="#f5f5f5"
      v-if="searchlogType == 2"
    >
      <view
        class="li"
        v-for="(item1, index1) in Recommend"
        :key="index1"
        @click="detailss(item1.id)"
      >
        <image :src="item1.showImg" mode="aspectFit" />
        <view class="li_1">
          <view class="tit">{{ item1.title }}</view>
          <view class="jiedao">地址：{{ item1.address }}</view>
          <view class="shijian">
            <span>均价：</span>
            <span
              style="margin-right: 24rpx; color: red; font-size: 36rpx; font-weight: 600"
              v-if="item1.averagePrice > 10000"
              >{{ (item1.averagePrice / 10000) | nums }}万/㎡</span
            >
            <span
              style="margin-right: 24rpx; color: red; font-size: 36rpx; font-weight: 600"
              v-else
              >{{
                isNaN(item1.averagePrice)
                  ? item1.averagePrice
                  : item1.averagePrice + "/㎡"
              }}</span
            >
          </view>
        </view>
      </view>
      <view v-if="Recommend.length == 0" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
    </scroll-view>

    <!-- 中介 -->
    <view
      class="list"
      :style="'height:calc( 100vh - ' + statusBarHeight + 'px - 60px )'"
      scroll-y
      @scrolltolower="down"
      refresher-background="#f5f5f5"
      v-if="searchlogType == 3"
    >
      <!-- <scroll-view
        :style="'height:calc( 100vh - ' + statusBarHeight + 'px )'"
        scroll-y
        @scrolltolower="down"
        refresher-background="#f5f5f5"
      >
      </scroll-view>-->
      <view
        class="li"
        v-for="(item3, index3) in Recommend"
        :key="index3"
        @click="details2(item3.id)"
      >
        <image :src="imgUrl + item3.image" />
        <view class="li_1">
          <view class="tit">{{ item3.shopName }}</view>
          <view class="jiedao">地址：{{ item3.shopArea }}</view>
          <view class="shijian">
            <span
              style="margin-right: 24rpx; color: red; font-size: 36rpx; font-weight: 600"
              >{{ item3.houseNum || 0 }}套</span
            >
            <span>在售/在租</span>
          </view>
        </view>
      </view>
      <view v-if="Recommend.length == 0" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
    </view>
    <!-- 看点 -->
    <scroll-view
      class="list"
      :style="'height:calc( 100vh - ' + statusBarHeight + 'px - 60px )'"
      scroll-y
      @scrolltolower="down"
      refresher-background="#f5f5f5"
      v-if="searchlogType == 4"
    >
      <view
        class="li"
        v-for="(item4, index4) in Recommend"
        :key="index4"
        @click="details3(item4.id)"
      >
        <image :src="imgUrl + item4.image" />
        <view class="li_1">
          <view class="tit">{{ item4.title }}</view>
          <view class="shijian authors">
            <span style="margin-right: 14rpx">{{ item4.author }}</span>
            <span>{{ item4.createDate }}</span>
          </view>
        </view>
      </view>
      <view v-if="Recommend.length == 0" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="Recommend.length && !downStatus">没有更多了</view>
    </scroll-view>

    <view class="zbc" v-if="zbc">
      <view class="sharer-tips" v-if="showShareTips">
        <view class="tips-top flex">
          <text>共享者说:</text>
          <image
            @click="goJuBao"
            src="https://pic.bangbangtongcheng.com/static/jubao.png"
            style="width: 60rpx; height: 60rpx"
          ></image>
        </view>
        <view class="tips-content">
          <view class="yong-jin flex">
            佣金:
            <view class="">
              {{ houseDetails.commission }}
            </view>
          </view>
          <view class="yong-jin flex">
            <text>备注: </text>
            <view>{{ houseDetails.share_remark }} </view>
          </view>
        </view>
        <view class="tips-btn" @click="closeTips"> 确定 </view>
      </view>
    </view>
    <uniBall></uniBall>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
let statusBarHeight;
//#ifdef H5
import wxshare from "../utils/index.js";
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
//#endif
// #ifdef APP-PLUS
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
//  #endif
// #ifdef MP-WEIXIN
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88;
//  #endif
export default {
  data() {
    return {
      statusBarHeight,
      recordList: [],
      BuildingsInfo: [],
      WatchList: [],
      getShop: [],
      search: "",
      Recommend: [],
      pageSize: 10,
      pageNo: 1,
      orderSort: "1",
      scrollTop: "0",
      trigger: false,
      userInfo: uni.getStorageSync("Pduser"),
      downStatus: true,
      houseDetails: {},
      upStatus: true,
      imgUrl: this.$imgSrc,
      keyword: "",
      ss: false,
      searchlogType: "",
      isShare: "",
      userQuery: "",
      showShareTips: false,
      zbc: false,
    };
  },
  computed: {
    ...mapGetters(["userid", "islogin", "statusBarHeight1", "userinfo"]),
  },
  onLoad(options) {
    console.log(options, "1111111111111111111");
    if (options.searchlogType) {
      this.searchlogType = options.searchlogType;
    }
    if (options.userid) {
      this.userQuery = options.userid;
    }
    // options.isShare && this.isShare = options.isShare;
    if (options.isShare) {
      this.isShare = options.isShare;
    }
    this.getrecord();
    /* #ifdef H5 */
    this.jinzhi();
    /* #endif */
  },
  async onPullDownRefresh() {
    this.Recommend = [];
    this.pageNo = 1;
    this.downStatus = true;
    if (this.upStatus) {
      this.trigger = true;
      await this.getRecommend();
    }
  },
  methods: {
    recordC(text) {
      this.search = text;
      this.searchList();
    },
    fanhui() {
      uni.navigateBack({
        delta: 1,
      });
    },
    back() {
      uni.navigateBack(-1);
    },
    // 打开共享者说
    openShareTips(val) {
      console.log(2222);
      this.houseDetails = val;
      this.zbc = true;
      this.showShareTips = true;
    },
    // 关闭共享者说
    closeTips() {
      this.zbc = false;
      this.showShareTips = false;
    },

    details(item) {
      if (item.examine_status == 2) {
        uni.navigateTo({
          url: "/pages_houses/housing/used/houseDetails?id=" + item.id,
        });
      }
    },
    //楼盘
    detailss(id) {
      console.log("楼盘");
      uni.navigateTo({
        url: "/pages_houses/houses/housesDetails?id=" + id,
      });
    },
    //中介
    details2(id) {
      uni.navigateTo({
        url: "/pages_intermediary/shopDetails?id=" + id,
      });
    },
    //看点
    details3(id) {
      uni.navigateTo({
        url: "/pages_index/Watch/details?id=" + id,
      });
    },

    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param,
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        },
      });
    },
    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"],
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari",
        ],
      });
    },
    async searchList() {
      this.keyword = this.search;
      this.pageNo = 1;
      if (!this.search == "") {
        this.$myRequest.post("/mob/home/saveSearchLog", {
          userId: this.userid,
          keyword: this.keyword,
          searchlogType: this.searchlogType,
        });
      }

      this.ss = true;
      this.downStatus = true;
      this.Recommend = [];
      this.firstSearch = true;
      if (this.searchlogType == 1) {
        //查询房源
        await this.getRecommend();
      } else if (this.searchlogType == 2) {
        //查询楼盘
        await this.getBuildingsInfo();
      } else if (this.searchlogType == 3) {
        //查询中介
        await this.getShopInfo();
      } else if (this.searchlogType == 4) {
        //查询中介
        await this.getWatch();
      }
    },
    // 去举报
    goJuBao() {
      uni.navigateTo({
        url: `/pages_houses/housing/informer?id=${this.houseDetails.user_id}&houseId=${this.houseDetails.id}`,
      });
    },

    down() {
      if (this.downStatus) {
        this.pageNo++;
        this.getRecommend();
      }
    },
    async up() {
      this.Recommend = [];
      this.pageNo = 1;
      this.downStatus = true;
      if (this.upStatus) {
        this.trigger = true;
        await this.getRecommend();
      }
    },
    getBuildingsInfo() {
      this.$myRequest
        .get("/mob/user/getBuildingsInfo", {
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          keyword: this.keyword,
          auditStatus: 2,
        })
        .then((res) => {
          console.log(res);
          if (!res.page.list.length) {
            this.downStatus = false;
          }
          if (res.page.count < this.pageNo * this.pageSize) {
            this.downStatus = false;
          }
          this.upStatus = true;
          this.trigger = false;
          res.page.list.forEach((el) => {
            if (el.showImg) {
              el.showImg = el.showImg.split("|")[0];
            }
          });
          console.log(this.Recommend);
          this.Recommend = this.Recommend.concat(res.page.list);
          this.firstSearch = false;
          uni.stopPullDownRefresh();
        });
    },
    getWatch() {
      this.$myRequest
        .get("/mob/home/getWatch", {
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          auditStatus: 2,
          keyword: this.keyword,
        })
        .then((res) => {
          console.log(res);
          if (!res.list.length) {
            this.downStatus = false;
          }
          if (res.count < this.pageNo * this.pageSize) {
            this.downStatus = false;
          }
          this.upStatus = true;
          this.trigger = false;
          // res.list.forEach((el) => {
          //   if (el.showImg) {
          //     el.showImg = el.showImg.split("|")[0];
          //   }
          // });
          console.log(this.Recommend);
          this.Recommend = this.Recommend.concat(res.list);
          this.firstSearch = false;
          uni.stopPullDownRefresh();
        });
    },
    // 中介
    getShopInfo() {
      this.$myRequest
        .get("/mob/user/getShopInfo", {
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          longitude: 30,
          latitude: 112,
          keyword: this.keyword,
          status: "1",
          shopType: "1",
        })
        .then((res) => {
          console.log(res);
          if (!res.page.list.length) {
            this.downStatus = false;
          }
          this.upStatus = true;
          this.trigger = false;
          res.page.list.forEach((el) => {
            if (el.image) {
              el.image = el.image.split("|")[0];
            }
          });
          this.Recommend = this.Recommend.concat(res.page.list);
          this.firstSearch = false;
        });
    },
    getRecommend() {
      this.upStatus = false;
      if (this.userQuery) {
        this.$myRequest
          .get("/mob/home/getHouseInfo", {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            orderSort: this.orderSort,
            keyword: this.keyword,
            status: "0,1",
            userId: this.userQuery,
          })
          .then((res) => {
            if (!res.list.length) {
              this.downStatus = false;
            }
            this.upStatus = true;
            this.trigger = false;
            res.list.forEach((el) => {
              if (el.house_image) {
                el.house_image = el.house_image.split("|")[0];
              }
            });
            this.Recommend = this.Recommend.concat(res.list);
            this.firstSearch = false;
            uni.stopPullDownRefresh();
          });
        return;
      }
      this.$myRequest
        .get("/mob/home/getHouseInfo", {
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          orderSort: this.orderSort,
          keyword: this.keyword,
          upStatus: 1,
          examineStatus: 2,
          isLz: "0",
          isShare: this.isShare,
        })
        .then((res) => {
          if (!res.list.length) {
            this.downStatus = false;
          }
          // if (this.pageNo == 1 && !res.list.length) {
          //   this.downStatus = false;
          // }
          this.upStatus = true;
          this.trigger = false;
          res.list.forEach((el) => {
            if (el.house_image) {
              el.house_image = el.house_image.split("|")[0];
            }
          });
          this.Recommend = this.Recommend.concat(res.list);
          this.firstSearch = false;
          uni.stopPullDownRefresh();
          // this.userInfo = res.userInfo;
          // uni.setStorageSync("Pduser", res.userInfo);
        });
    },
    getrecord() {
      console.log("查询历史记录");
      this.$myRequest
        .get("/mob/home/getSearchLog", {
          userId: this.userid,
          pageNo: 1,
          pageSize: 20,
          searchlogType: this.searchlogType,
          is_share: this.isShare,
        })
        .then((res) => {
          this.recordList = res.list;
        });
    },
    delrecord() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "是否清除所有搜索记录？",
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            this.$myRequest
              .post("/mob/home/delSearchLog", {
                userId: this.userid,
              })
              .then((res) => {
                // this.recordList = res.list;
                uni.showToast({
                  title: "删除成功",
                  icon: "none",
                  mask: true,
                });
                that.getrecord();
              });
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  color: #333;
  background-color: #fff;
}
.sharer-say {
  // position: absolute;
  justify-content: space-between;
  align-items: center;
  bottom: -30rpx;
  right: 0;
  text {
    width: 400rpx;
    // flex: 11;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  view {
    // flex: 1;
    padding: 10rpx;
    color: #64b6a8;
  }
}
.HousCondition {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .status {
    display: flex;
    align-items: center;

    .item {
      width: 96rpx;
      height: 48rpx;
      background: #ffffff;
      border-radius: 4rpx;
      border: 1px solid #64b6a8;
      margin-right: 10rpx;
      font-size: 24rpx;
      color: #64b6a8;
      text-align: center;
      line-height: 48rpx;
    }
  }
}

.tou {
  position: relative;
  width: 100%;
  // height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: #64b6a8;

  image {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    // top: 116rpx;
    left: 30rpx;
  }
}

.sousuo {
  position: relative;
  width: 686rpx;
  height: 72rpx;
  margin-top: 30rpx;
  margin-left: 30rpx;
  border: 2rpx solid #64b6a8;
  border-radius: 36rpx;

  image {
    display: inline-block;
    width: 50rpx;
    height: 50rpx;
    margin-left: 20rpx;
    margin-top: 12rpx;
  }

  input {
    display: inline-block;
    width: 400rpx;
    height: 50rpx;
    line-height: 52rpx;
    margin-top: 12rpx;
    vertical-align: top;
    font-size: 28rpx;
  }

  .quxiao {
    position: absolute;
    top: 4rpx;
    right: 4rpx;
    width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    color: #fff;
    text-align: center;
    background: #64b6a8;
    border-radius: 30rpx;
  }
}

.lishi {
  position: relative;
  width: 690rpx;
  margin-left: 30rpx;
  margin-top: 50rpx;

  image {
    position: absolute;
    width: 58rpx;
    height: 58rpx;
    right: 0;
  }
}

.list1 {
  width: 690rpx;
  margin-left: 30rpx;
  margin-top: 32rpx;

  .li {
    display: inline-block;
    font-size: 26rpx;
    padding: 14rpx 26rpx;
    background-color: #f2f2f2;
    margin-right: 24rpx;
    margin-bottom: 24rpx;
    border-radius: 10rpx;
  }
}

.list {
  margin-top: 50rpx;
  margin-left: 30rpx;
  width: 720rpx;

  .tit {
    color: #333333;
    font-size: 36rpx;
    margin-bottom: 24rpx;
    display: flex;
    justify-content: space-between;
    width: 690rpx;

    .tg {
      color: #64b6a8;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      position: relative;

      .triangle {
        width: 0px;
        height: 0px;
        box-sizing: content-box;
        border-left: 8rpx solid transparent;
        border-right: 8rpx solid transparent;
        border-bottom: 15rpx solid #64b6a8;
        margin-left: 20rpx;
        transition: all 0.5s;
      }

      .fan {
        transition: all 0.5s;
        transform: rotate(180deg);
      }

      .kuang {
        position: absolute;
        left: -240rpx;
        top: 120%;
        background: #fff;
        // transform: translateY(-50%);
        width: 330rpx;
        padding: 0 30rpx;
        z-index: 20;
        box-shadow: 0 0 8rpx 4rpx rgba(0, 0, 0, 0.3);

        .item {
          height: 90rpx;
          line-height: 90rpx;
          border-bottom: 2rpx solid #e0e0e0;
        }

        .item:last-child {
          border-bottom: 0;
        }
      }
    }
  }

  .li {
    width: 96%;
    padding-bottom: 15rpx;
    margin-bottom: 30rpx;
    border-bottom: 2rpx solid #e0e0e0;

    image {
      background-color: #f8f8f8;
      width: 300rpx;
      height: 200rpx;
    }

    .li_1 {
      position: relative;
      display: inline-block;
      vertical-align: top;
      margin-left: 24rpx;
      height: 110px;

      .tit {
        width: 366rpx;
        font-size: 34rpx;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; //想要的行数
        -webkit-box-orient: vertical;
        min-height: 46rpx;
      }

      .jiedao {
        width: 366rpx;
        font-size: 24rpx;
        margin-bottom: 14rpx;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //想要的行数
        -webkit-box-orient: vertical;
        min-height: 32rpx;
      }

      .shijian {
        bottom: 4rpx;
        font-size: 26rpx;

        .ycyc {
          display: inline-block;
          width: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          // line-height: 12.5px;
        }
      }

      .authors {
        position: absolute !important;
      }
    }
  }

  .li:last-child {
    border-bottom: 0rpx solid #e0e0e0;
  }
}

.down {
  height: 60rpx;
  line-height: 60rpx;
  // border-top: 2rpx solid #d0d0d0;
  text-align: center;
}

.none {
  text-align: center;

  image {
    width: 430rpx;
    margin-bottom: 16rpx;
  }

  view {
    height: 40rpx;
    line-height: 40rpx;
    color: #666;
  }
}
.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;
  .sharer-tips {
    position: absolute;
    // padding: 30rpx0;
    width: 600rpx;
    // height: 310rpx;
    background-color: #fff;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10rpx;
    .tips-top {
      padding: 45rpx 35rpx 20rpx;

      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .tips-content {
      padding: 0 35rpx;
      .yong-jin {
        margin-bottom: 10rpx;
        align-items: flex-start;
        flex-wrap: wrap;
        view {
          margin-left: 10rpx;
          width: 400rpx;
          word-wrap: break-word;
          word-break: break-all;
          word-break: break-all;
        }
      }
    }
    .tips-btn {
      width: 100%;
      padding: 30rpx 0;
      margin-top: 40rpx;
      text-align: center;
      background-color: #64b6a8;
      color: #fff;
    }
  }
}
</style>
